<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2021/12/17
  Time: 8:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色管理</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <style>
        /*解决普通复选框无上边框问题*/
        .laytable-cell-1-0 .layui-icon {
            margin-top: 5px !important;
        }
        /*解决横条复选框无上边框问题*/
        .layui-table-view .layui-form-checkbox{
            margin-top:0px !important;
        }
    </style>
</head>
<body>
<%--添加和修改的弹出框--%>
<form style="display: none" class="layui-form" id="editForm" lay-filter="editForm">
    <input name="roleid" style="display: none">
    <br>
    <div class="layui-form-item">
        <label class="layui-form-label">角色名</label>
        <div class="layui-input-inline">
            <input type="text" name="rolename" id="rolename" required placeholder="请输入角色名" class="layui-input" lay-verify="required|name">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">角色描述</label>
        <div class="layui-input-inline">
            <input type="text" name="remark" required placeholder="请输入角色描述" class="layui-input" lay-verify="required">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">角色状态</label>
        <div class="layui-input-inline">
            <select  name="status" lay-verify="required">
                <option value="请选择">--请选择--</option>
                <option value="0">禁用</option>
                <option value="1">启用</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button id="btnSub" class="layui-btn" lay-submit lay-filter="editRole">确认</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        {{#  if(${sessionScope.staff.branchid} == 12138){ }}
        <button class="layui-btn layui-btn-sm" lay-event="addRole">新增角色</button>
        {{#  } else { }}
        {{#  } }}
        <button class="layui-btn layui-btn-sm" lay-event="refresh">刷新表格</button>
    </div>
</script>
<div style="margin:20px 10px;">
    <table  class="layui-hide" id="test" lay-filter="test"></table>
    <%--树形结构--%>
    <div id="permission" style="display: none">
        <div style="height: 550px"  id="test12" class="demo-tree-more"></div>
        <a class="layui-btn" id="comfirmPermission">确定修改</a>
    </div>
    <script type="text/html" id="barDemo">
        {{# if(d.status==0){  }}
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="editPermission">修改权限</a>
        {{# }else{ }}
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        {{# } }}
    </script>

</div>
</body>
<script>
    layui.use(['tree', 'util','table','jquery'], function() {
        var table = layui.table;
        var tree = layui.tree;
        var layer = layui.layer;
        var util = layui.util;
        var $=layui.jquery;
        table.render({
            elem: '#test'
            ,url:'${pageContext.request.contextPath}/role/findAll'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,title: '角色数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'roleid', title:'ID',  fixed: 'left', unresize: true, sort: true}
                ,{field:'rolename', title:'角色名'}
                ,{field:'remark', title:'角色描述', edit: 'text'}
                ,{field:'status', title:'状态', width:120,templet:function(data){
                        if(data.status==0){
                            return '<a class="layui-btn layui-btn-xs">可以</a>';
                        }else{
                            return '<a class="layui-btn layui-btn-danger layui-btn-xs">禁用</a>';
                        }
                    }}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:250}
            ]]
            ,page: true
        });


        //新增和修改角色的表单提交事件
        form.on('submit(editRole)', function (data){
            var roleData = form.val("editForm");
            $.ajax({
                type: "post",
                url: "${pageContext.request.contextPath}/role/addOrUpdate",
                dataType: 'json',
                async:false,
                data:roleData,
                success: function (result) {
                    //alert(result!=null);
                    layer.closeAll();//关闭弹框
                    if (result.code == 200 ){
                        layer.msg(result.msg);
                    }else{
                        layer.msg(result.msg);
                    }
                    table.reload('tb');
                }
            });
        });



        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'addRole':
                    //打开弹出框时先清空
                    $("#editForm")[0].reset();
                    layer.open({
                        type: 1,
                        anim: 3,
                        title: ['添加角色', 'font-size:20px'],
                        content: $("#editForm"),
                        offset: '50px',
                        area: '400px'
                    })
                    break;
                case 'refresh':
                    table.reload('tb');//刷新表格
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        var rowData;
        table.on('tool(test)', function(obj){
            var data = obj.data;
            rowData = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除吗', function(index){
                    if (data.status == 0) {
                        $.ajax({
                            type:'post',
                            url:'${pageContext.request.contextPath}/role/delById',
                            data:{'roleid':data.roleid},
                            dataType: 'json',
                            success:function (result){
                                layer.closeAll();
                                if (result.code == 1) {
                                    layer.msg(result.msg)
                                }else {
                                    layer.msg(result.msg)
                                }
                                table.reload('tb');
                            }
                        })
                    }else {
                        layer.msg("启用状态，无法删除！")
                    }
                    layer.close(index);
                });
            } else if(obj.event === 'edit') {
                //打开弹出框时先清空
                $("#editForm")[0].reset();
                layer.open({
                    type: 1,
                    anim: 3,
                    title: ['修改角色', 'font-size:20px'],
                    content: $("#editForm"),
                    offset: '50px',
                    area: '400px',
                    success:function (){
                        form.val("editForm",data);//点击编辑时，填充数据
                    }
                })
            }else if (obj.event==='update'){//修改权限的弹出框
                layer.open({
                    type: 1,
                    anim: 3,
                    offset: '50px',
                    title: ['修改权限', 'font-size:20px'],
                    content: $("#treeDemo")
                })

        //确定修改权限
        var rid; //全局变量 表示被修改的角色id 当被点击修改权限按钮时为该rid赋值
        $("#comfirmPermission").click(function(){
            var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
            var menuIds="";
            for(var i=0;i<checkedData.length;i++){
                var checkedDatum = checkedData[i];
                menuIds+="menuId="+checkedDatum.id+"&";
                var children=checkedDatum.children;
                for(var j=0;j<children.length;j++){
                    menuIds+="menuId="+children[j].id+"&"
                }
            }
            menuIds=menuIds.substring(0,menuIds.lastIndexOf("&"))

            $.ajax({
                url:"${pageContext.request.contextPath}/menu/confirmPermission?"+menuIds,
                data:{"rid":rid},
                dataType:"json",
                success: function(result){
                    if(result.code===2000) {
                        layer.closeAll();
                        layer.msg(result.msg, {icon: 1})
                    }
                }
            });
        });
        //基本演示  tree.render is not a function layui版本太低
        function getPermissionTree(){
            $.ajax({
                url:"${pageContext.request.contextPath}/menu/treeMenu",
                dataType:"json",
                type:"post",
                success: function(result){
                    if(result.code===2000){
                        tree.render({
                            elem: '#test12'
                            ,data: result.data
                            ,showCheckbox: true  //是否显示复选框
                            ,id: 'demoId1'  //区分不同的树
                            ,isJump: true //是否允许点击节点时弹出新窗口跳转
                        });
                    }
                }
            });
        }
        //选中默认有的权限
        function setMyChecked(id){
            $.ajax({
                url:"${pageContext.request.contextPath}/menu/findRoleMenuId",
                data:{"rid":id},
                dataType:"json",
                success: function(result){
                    tree.setChecked('demoId1', result.data); //勾选指定节点
                }
            })
        }

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'editPermission'){
                getPermissionTree();
                rid=data.id;
                layer.open({
                    type:1,
                    title: "修改权限",
                    area:["300px","600px"],
                    content: $("#permission")
                })
                setMyChecked(data.id);
            }
        });
    }
        })
    });
</script>
</html>
